<template>
    <select class="comp-nationality"
            :name="name"
            data-country="US"
            v-model="currCountry"
            @change="changeCountry()"
            ref="currCountry">
        <option value="" class="default-opt">{{ $t('common.comp.nationality.chooseNationality') }}</option>
        <option value="AF">{{ $t('common.comp.nationality.Afghanistan') }}</option>
        <option value="AL">{{ $t('common.comp.nationality.Albania') }}</option>
        <option value="DZ">{{ $t('common.comp.nationality.Algeria') }}</option>
        <option value="AS">{{ $t('common.comp.nationality.AmericanSamoa') }}</option>
        <option value="AD">{{ $t('common.comp.nationality.Andorra') }}</option>
        <option value="AO">{{ $t('common.comp.nationality.Angola') }}</option>
        <option value="AI">{{ $t('common.comp.nationality.Anguilla') }}</option>
        <option value="AQ">{{ $t('common.comp.nationality.Antarctica') }}</option>
        <option value="AG">{{ $t('common.comp.nationality.AntiguaBarbuda') }}</option>
        <option value="AR">{{ $t('common.comp.nationality.Argentina') }}</option>
        <option value="AM">{{ $t('common.comp.nationality.Armenia') }}</option>
        <option value="AW">{{ $t('common.comp.nationality.Aruba') }}</option>
        <option value="AU">{{ $t('common.comp.nationality.Australia') }}</option>
        <option value="AT">{{ $t('common.comp.nationality.Austria') }}</option>
        <option value="AZ">{{ $t('common.comp.nationality.Azerbaijan') }}</option>
        <option value="BH">{{ $t('common.comp.nationality.Bahrain') }}</option>
        <!--<option value="BD">Bangladesh</option>-->
        <option value="BB">{{ $t('common.comp.nationality.Barbados') }}</option>
        <!--<option value="BY">Belarus</option>-->
        <option value="BE">{{ $t('common.comp.nationality.Belgium') }}</option>
        <option value="BZ">{{ $t('common.comp.nationality.Belize') }}</option>
        <option value="BJ">{{ $t('common.comp.nationality.Benin') }}</option>
        <option value="BM">{{ $t('common.comp.nationality.Bermuda') }}</option>
        <option value="BT">{{ $t('common.comp.nationality.Bhutan') }}</option>
        <!--<option value="BO">Bolivia</option>-->
        <option value="BA">{{ $t('common.comp.nationality.BosniaHerzegovina') }}</option>
        <option value="BW">{{ $t('common.comp.nationality.Botswana') }}</option>
        <option value="BV">{{ $t('common.comp.nationality.BouvetIsland') }}</option>
        <option value="BR">{{ $t('common.comp.nationality.Brazil') }}</option>
        <option value="IO">{{ $t('common.comp.nationality.BritishIndianOceanTerritory') }}</option>
        <option value="VG">{{ $t('common.comp.nationality.BritishVirginIslands') }}</option>
        <option value="BN">{{ $t('common.comp.nationality.Brunei') }}</option>
        <option value="BG">{{ $t('common.comp.nationality.Bulgaria') }}</option>
        <option value="BF">{{ $t('common.comp.nationality.BurkinaFaso') }}</option>
        <!--<option value="BI">Burundi</option>-->
        <!--<option value="CI">Coate d'Ivoire</option>-->
        <option value="KH">{{ $t('common.comp.nationality.Cambodia') }}</option>
        <option value="CM">{{ $t('common.comp.nationality.Cameroon') }}</option>
        <option value="CA">{{ $t('common.comp.nationality.Canada') }}</option>
        <option value="CV">{{ $t('common.comp.nationality.CapeVerde') }}</option>
        <option value="KY">{{ $t('common.comp.nationality.CaymanIslands') }}</option>
        <!--<option value="CF">Central African Republic</option>-->
        <option value="TD">{{ $t('common.comp.nationality.Chad') }}</option>
        <option value="CL">{{ $t('common.comp.nationality.Chile') }}</option>
        <option value="CN">{{ $t('common.comp.nationality.China') }}</option>
        <option value="CX">{{ $t('common.comp.nationality.ChristmasIsland') }}</option>
        <option value="CC">{{ $t('common.comp.nationality.CocosIslands') }}</option>
        <option value="CO">{{ $t('common.comp.nationality.Colombia') }}</option>
        <option value="KM">{{ $t('common.comp.nationality.Comoros') }}</option>
        <option value="CG">{{ $t('common.comp.nationality.Congo') }}</option>
        <option value="CK">{{ $t('common.comp.nationality.CookIslands') }}</option>
        <option value="CR">{{ $t('common.comp.nationality.CostaRica') }}</option>
        <option value="HR">{{ $t('common.comp.nationality.Croatia') }}</option>
        <!--<option value="CU">Cuba</option>-->
        <option value="CY">{{ $t('common.comp.nationality.Cyprus') }}</option>
        <option value="CZ">{{ $t('common.comp.nationality.CzechRepublic') }}</option>
        <!--<option value="CD">Democratic Republic of the Congo</option>-->
        <option value="DK">{{ $t('common.comp.nationality.Denmark') }}</option>
        <option value="DJ">{{ $t('common.comp.nationality.Djibouti') }}</option>
        <option value="DM">{{ $t('common.comp.nationality.Dominica') }}</option>
        <option value="DO">{{ $t('common.comp.nationality.DominicanRepublic') }}</option>
        <option value="TP">{{ $t('common.comp.nationality.EastTimor') }}</option>
        <!--<option value="EC">Ecuador</option>-->
        <option value="EG">{{ $t('common.comp.nationality.Egypt') }}</option>
        <option value="SV">{{ $t('common.comp.nationality.ElSalvador') }}</option>
        <option value="GQ">{{ $t('common.comp.nationality.EquatorialGuinea') }}</option>
        <option value="ER">{{ $t('common.comp.nationality.Eritrea') }}</option>
        <option value="EE">{{ $t('common.comp.nationality.Estonia') }}</option>
        <option value="ET">{{ $t('common.comp.nationality.Ethiopia') }}</option>
        <option value="FO">{{ $t('common.comp.nationality.FaeroeIslands') }}</option>
        <option value="FK">{{ $t('common.comp.nationality.FalklandIslands') }}</option>
        <option value="FJ">{{ $t('common.comp.nationality.Fiji') }}</option>
        <option value="FI">{{ $t('common.comp.nationality.Finland') }}</option>
        <option value="MK">{{ $t('common.comp.nationality.FormerYugoslavRepublic') }}</option>
        <option value="FR">{{ $t('common.comp.nationality.France') }}</option>
        <option value="GF">{{ $t('common.comp.nationality.FrenchGuiana') }}</option>
        <option value="PF">{{ $t('common.comp.nationality.FrenchPolynesia') }}</option>
        <option value="TF">{{ $t('common.comp.nationality.FrenchSouthernTerritories') }}</option>
        <option value="GA">{{ $t('common.comp.nationality.Gabon') }}</option>
        <option value="GE">{{ $t('common.comp.nationality.Georgia') }}</option>
        <option value="DE">{{ $t('common.comp.nationality.Germany') }}</option>
        <option value="GH">{{ $t('common.comp.nationality.Ghana') }}</option>
        <option value="GI">{{ $t('common.comp.nationality.Gibraltar') }}</option>
        <option value="GR">{{ $t('common.comp.nationality.Greece') }}</option>
        <option value="GL">{{ $t('common.comp.nationality.Greenland') }}</option>
        <option value="GD">{{ $t('common.comp.nationality.Grenada') }}</option>
        <option value="GP">{{ $t('common.comp.nationality.Guadeloupe') }}</option>
        <option value="GU">{{ $t('common.comp.nationality.Guam') }}</option>
        <option value="GT">{{ $t('common.comp.nationality.Guatemala') }}</option>
        <option value="GN">{{ $t('common.comp.nationality.Guinea') }}</option>
        <option value="GW">{{ $t('common.comp.nationality.GuineaBissau') }}</option>
        <option value="GY">{{ $t('common.comp.nationality.Guyana') }}</option>
        <option value="HT">{{ $t('common.comp.nationality.Haiti') }}</option>
        <option value="HM">{{ $t('common.comp.nationality.HeardMcDonaldIslands') }}</option>
        <option value="HN">{{ $t('common.comp.nationality.Honduras') }}</option>
        <option value="HK">{{ $t('common.comp.nationality.HongKong') }}</option>
        <option value="HU">{{ $t('common.comp.nationality.Hungary') }}</option>
        <option value="IS">{{ $t('common.comp.nationality.Iceland') }}</option>
        <option value="IN">{{ $t('common.comp.nationality.India') }}</option>
        <option value="ID">{{ $t('common.comp.nationality.Indonesia') }}</option>
        <!--<option value="IR">Iran</option>-->
        <!--<option value="IQ">Iraq</option>-->
        <option value="IE">{{ $t('common.comp.nationality.Ireland') }}</option>
        <option value="IL">{{ $t('common.comp.nationality.Israel') }}</option>
        <option value="IT">{{ $t('common.comp.nationality.Italy') }}</option>
        <option value="JM">{{ $t('common.comp.nationality.Jamaica') }}</option>
        <option value="JP">{{ $t('common.comp.nationality.Japan') }}</option>
        <option value="JO">{{ $t('common.comp.nationality.Jordan') }}</option>
        <option value="KZ">{{ $t('common.comp.nationality.Kazakhstan') }}</option>
        <option value="KE">{{ $t('common.comp.nationality.Kenya') }}</option>
        <option value="KI">{{ $t('common.comp.nationality.Kiribati') }}</option>
        <option value="KW">{{ $t('common.comp.nationality.Kuwait') }}</option>
        <!--<option value="KG">Kyrgyzstan</option>-->
        <option value="LA">{{ $t('common.comp.nationality.Laos') }}</option>
        <option value="LV">{{ $t('common.comp.nationality.Latvia') }}</option>
        <!--<option value="LB">Lebanon</option>-->
        <option value="LS">{{ $t('common.comp.nationality.Lesotho') }}</option>
        <option value="LR">{{ $t('common.comp.nationality.Liberia') }}</option>
        <!--<option value="LY">Libya</option>-->
        <option value="LI">{{ $t('common.comp.nationality.Liechtenstein') }}</option>
        <option value="LT">{{ $t('common.comp.nationality.Lithuania') }}</option>
        <option value="LU">{{ $t('common.comp.nationality.Luxembourg') }}</option>
        <option value="MO">{{ $t('common.comp.nationality.Macau') }}</option>
        <option value="MG">{{ $t('common.comp.nationality.Madagascar') }}</option>
        <option value="MW">{{ $t('common.comp.nationality.Malawi') }}</option>
        <option value="MY">{{ $t('common.comp.nationality.Malaysia') }}</option>
        <option value="MV">{{ $t('common.comp.nationality.Maldives') }}</option>
        <option value="ML">{{ $t('common.comp.nationality.Mali') }}</option>
        <option value="MT">{{ $t('common.comp.nationality.Malta') }}</option>
        <option value="MH">{{ $t('common.comp.nationality.MarshallIslands') }}</option>
        <option value="MQ">{{ $t('common.comp.nationality.Martinique') }}</option>
        <option value="MR">{{ $t('common.comp.nationality.Mauritania') }}</option>
        <option value="MU">{{ $t('common.comp.nationality.Mauritius') }}</option>
        <option value="YT">{{ $t('common.comp.nationality.Mayotte') }}</option>
        <option value="MX">{{ $t('common.comp.nationality.Mexico') }}</option>
        <option value="FM">{{ $t('common.comp.nationality.Micronesia') }}</option>
        <option value="MD">{{ $t('common.comp.nationality.Moldova') }}</option>
        <option value="MC">{{ $t('common.comp.nationality.Monaco') }}</option>
        <option value="MN">{{ $t('common.comp.nationality.Mongolia') }}</option>
        <option value="ME">{{ $t('common.comp.nationality.Montenegro') }}</option>
        <option value="MS">{{ $t('common.comp.nationality.Montserrat') }}</option>
        <option value="MA">{{ $t('common.comp.nationality.Morocco') }}</option>
        <option value="MZ">{{ $t('common.comp.nationality.Mozambique') }}</option>
        <!--<option value="MM">Myanmar</option>-->
        <option value="NA">{{ $t('common.comp.nationality.Namibia') }}</option>
        <option value="NR">{{ $t('common.comp.nationality.Nauru') }}</option>
        <option value="NP">{{ $t('common.comp.nationality.Nepal') }}</option>
        <option value="NL">{{ $t('common.comp.nationality.Netherlands') }}</option>
        <option value="AN">{{ $t('common.comp.nationality.NetherlandsAntilles') }}</option>
        <option value="NC">{{ $t('common.comp.nationality.NewCaledonia') }}</option>
        <option value="NZ">{{ $t('common.comp.nationality.NewZealand') }}</option>
        <option value="NI">{{ $t('common.comp.nationality.Nicaragua') }}</option>
        <option value="NE">{{ $t('common.comp.nationality.Niger') }}</option>
        <option value="NG">{{ $t('common.comp.nationality.Nigeria') }}</option>
        <option value="NU">{{ $t('common.comp.nationality.Niue') }}</option>
        <option value="NF">{{ $t('common.comp.nationality.NorfolkIsland') }}</option>
        <!--<option value="KP">North Korea</option>-->
        <option value="MP">{{ $t('common.comp.nationality.NorthernMarianas') }}</option>
        <option value="NO">{{ $t('common.comp.nationality.Norway') }}</option>
        <option value="OM">{{ $t('common.comp.nationality.Oman') }}</option>
        <option value="PK">{{ $t('common.comp.nationality.Pakistan') }}</option>
        <option value="PW">{{ $t('common.comp.nationality.Palau') }}</option>
        <option value="PS">{{ $t('common.comp.nationality.Palestine') }}</option>
        <option value="PA">{{ $t('common.comp.nationality.Panama') }}</option>
        <option value="PG">{{ $t('common.comp.nationality.PapuaNewGuinea') }}</option>
        <option value="PY">{{ $t('common.comp.nationality.Paraguay') }}</option>
        <option value="PE">{{ $t('common.comp.nationality.Peru') }}</option>
        <option value="PH">{{ $t('common.comp.nationality.Philippines') }}</option>
        <option value="PN">{{ $t('common.comp.nationality.PitcairnIslands') }}</option>
        <option value="PL">{{ $t('common.comp.nationality.Poland') }}</option>
        <option value="PT">{{ $t('common.comp.nationality.Portugal') }}</option>
        <option value="PR">{{ $t('common.comp.nationality.PuertoRico') }}</option>
        <option value="QA">{{ $t('common.comp.nationality.Qatar') }}</option>
        <option value="RE">{{ $t('common.comp.nationality.Reunion') }}</option>
        <option value="RO">{{ $t('common.comp.nationality.Romania') }}</option>
        <option value="RU">{{ $t('common.comp.nationality.Russia') }}</option>
        <option value="RW">{{ $t('common.comp.nationality.Rwanda') }}</option>
        <option value="ST">{{ $t('common.comp.nationality.SaoTomePrincipe') }}</option>
        <option value="SH">{{ $t('common.comp.nationality.SaintHelena') }}</option>
        <option value="PM">{{ $t('common.comp.nationality.StPierreMiquelon') }}</option>
        <option value="KN">{{ $t('common.comp.nationality.SaintKittsNevis') }}</option>
        <option value="LC">{{ $t('common.comp.nationality.SaintLucia') }}</option>
        <option value="VC">{{ $t('common.comp.nationality.SaintVincentGrenadines') }}</option>
        <option value="WS">{{ $t('common.comp.nationality.Samoa') }}</option>
        <option value="SM">{{ $t('common.comp.nationality.SanMarino') }}</option>
        <option value="SA">{{ $t('common.comp.nationality.SaudiArabia') }}</option>
        <option value="SN">{{ $t('common.comp.nationality.Senegal') }}</option>
        <option value="RS">{{ $t('common.comp.nationality.Serbia') }}</option>
        <option value="SC">{{ $t('common.comp.nationality.Seychelles') }}</option>
        <option value="SL">{{ $t('common.comp.nationality.SierraLeone') }}</option>
        <option value="SG">{{ $t('common.comp.nationality.Singapore') }}</option>
        <option value="SK">{{ $t('common.comp.nationality.Slovakia') }}</option>
        <option value="SI">{{ $t('common.comp.nationality.Slovenia') }}</option>
        <option value="SB">{{ $t('common.comp.nationality.SolomonIslands') }}</option>
        <!--<option value="SO">Somalia</option>-->
        <option value="ZA">{{ $t('common.comp.nationality.SouthAfrica') }}</option>
        <option value="GS">{{ $t('common.comp.nationality.SouthGeorgiaSouthSandwichIslands') }}</option>
        <option value="KR">{{ $t('common.comp.nationality.SouthKorea') }}</option>
        <option value="ES">{{ $t('common.comp.nationality.Spain') }}</option>
        <option value="LK">{{ $t('common.comp.nationality.SriLanka') }}</option>
        <!--<option value="SD">Sudan</option>-->
        <option value="SR">{{ $t('common.comp.nationality.Suriname') }}</option>
        <option value="SJ">{{ $t('common.comp.nationality.SouthGeorgiaSouthSandwichIslands') }}</option>
        <option value="SZ">{{ $t('common.comp.nationality.Swaziland') }}</option>
        <option value="SE">{{ $t('common.comp.nationality.Sweden') }}</option>
        <option value="CH">{{ $t('common.comp.nationality.Switzerland') }}</option>
        <!--<option value="SY">Syria</option>-->
        <option value="TW">{{ $t('common.comp.nationality.Taiwan') }}</option>
        <option value="TJ">{{ $t('common.comp.nationality.Tajikistan') }}</option>
        <option value="TZ">{{ $t('common.comp.nationality.Tanzania') }}</option>
        <option value="TH">{{ $t('common.comp.nationality.Thailand') }}</option>
        <option value="BS">{{ $t('common.comp.nationality.TheBahamas') }}</option>
        <option value="GM">{{ $t('common.comp.nationality.TheGambia') }}</option>
        <option value="TG">{{ $t('common.comp.nationality.Togo') }}</option>
        <option value="TK">{{ $t('common.comp.nationality.Tokelau') }}</option>
        <option value="TO">{{ $t('common.comp.nationality.Tonga') }}</option>
        <option value="TT">{{ $t('common.comp.nationality.TrinidadTobago') }}</option>
        <option value="TN">{{ $t('common.comp.nationality.Tunisia') }}</option>
        <option value="TR">{{ $t('common.comp.nationality.Turkey') }}</option>
        <option value="TM">{{ $t('common.comp.nationality.Turkmenistan') }}</option>
        <option value="TC">{{ $t('common.comp.nationality.TurksCaicosIslands') }}</option>
        <option value="TV">{{ $t('common.comp.nationality.Tuvalu') }}</option>
        <!--<option value="VI">US Virgin Islands</option>-->
        <option value="UG">{{ $t('common.comp.nationality.Uganda') }}</option>
        <option value="UA">{{ $t('common.comp.nationality.Ukraine') }}</option>
        <option value="AE">{{ $t('common.comp.nationality.UnitedArabEmirates') }}</option>
        <option value="GB">{{ $t('common.comp.nationality.UnitedKingdom') }}</option>
        <!--<option value="US">United States</option>-->
        <option value="UM">{{ $t('common.comp.nationality.UnitedStatesMinorOutlyingIslands') }}</option>
        <option value="UY">{{ $t('common.comp.nationality.Uruguay') }}</option>
        <option value="UZ">{{ $t('common.comp.nationality.Uzbekistan') }}</option>
        <option value="VU">{{ $t('common.comp.nationality.Vanuatu') }}</option>
        <option value="VA">{{ $t('common.comp.nationality.VaticanCity') }}</option>
        <!--<option value="VE">Venezuela</option>-->
        <option value="VN">{{ $t('common.comp.nationality.Vietnam') }}</option>
        <option value="WF">{{ $t('common.comp.nationality.WallisFutunaIslands') }}</option>
        <option value="EH">{{ $t('common.comp.nationality.WesternSahara') }}</option>
        <!--<option value="YE">Yemen</option>-->
        <option value="ZM">{{ $t('common.comp.nationality.Zambia') }}</option>
        <!--<option value="ZW">Zimbabwe</option>-->
    </select>
</template>

<script type="text/babel">
    export default {
        name: "Nationality",
        data() {
            return {

            };
        },
        props: {
            value:{
                type: String,
                default: ''
            },
            name:{
                type: String
            }
        },
        created(){
            this.currCountry = this.value;
        },
        mounted(){
            if(this.$i18n.locale === 'hk' || this.$i18n.locale === 'cn'){
                $('.comp-nationality option').not('.default-opt').sort(function(param1,param2){
                    let aText = $(param1).text();
                    let bText = $(param2).text();
                    return aText.localeCompare(bText,'zh');
                }).appendTo('.comp-nationality');
            }
            else if(this.$i18n.locale === 'es'){
                $('.comp-nationality option').not('.default-opt').sort(function(param1,param2){
                    let aText = $(param1).text().toUpperCase();
                    let bText = $(param2).text().toUpperCase();
                    if(aText>bText) return 1;
                    if(aText<bText) return -1;
                    return 0;
                }).appendTo('.comp-nationality');
            }
        },
        methods: {
            changeCountry(){
                let countryDom = this.$refs.currCountry;
                let country = countryDom.options[countryDom.selectedIndex].text;
                this.$emit('changeCountry',this.currCountry,country);
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-nationality{
        width: 255px;
        option{
            background-color:#ffffff;
            color:#333;
        }
    }
</style>